<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>packages/my-map-measure/Measure.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="ol.interaction.areaSelect.html">areaSelect</a></li><li><a href="ol.interaction.drag.html">drag</a></li><li><a href="ol.source.TileSuperMapRest.html">TileSuperMapRest</a><ul class='methods'><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.createTileGrid">createTileGrid</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#.optionsFromMapJSON">optionsFromMapJSON</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#changeTilesVersion">changeTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#createLayerUrl">createLayerUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getAllRequestParams">getAllRequestParams</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getFullRequestUrl">getFullRequestUrl</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#getRequestParamString">getRequestParamString</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#lastTilesVersion">lastTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#mergeTileVersionParam">mergeTileVersionParam</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#nextTilesVersion">nextTilesVersion</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#setTileSetsInfo">setTileSetsInfo</a></li><li data-type='method'><a href="ol.source.TileSuperMapRest.html#updateCurrentTileSetsIndex">updateCurrentTileSetsIndex</a></li></ul></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_map_mixins_feature.html">$ui/map/mixins/feature</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_mixins_feature.html#~setStyle">setStyle</a></li></ul></li><li><a href="module-$ui_map_mixins_image.html">$ui/map/mixins/image</a></li><li><a href="module-$ui_map_mixins_stroke.html">$ui/map/mixins/stroke</a></li><li><a href="module-$ui_map_my-map.html">$ui/map/my-map</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map.html#~addFeature">addFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~clickTrigger">clickTrigger</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~dispose">dispose</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureAtPixel">getFeatureAtPixel</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getFeatureVM">getFeatureVM</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getLayer">getLayer</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~getMetersPerUnit">getMetersPerUnit</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~mapReady">mapReady</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~moveTo">moveTo</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~removeFeature">removeFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~resize">resize</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setActive">setActive</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~setCursor">setCursor</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomIn">zoomIn</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomOut">zoomOut</a></li><li data-type='method'><a href="module-$ui_map_my-map.html#~zoomTo">zoomTo</a></li></ul></li><li><a href="module-$ui_map_my-map-circle.html">$ui/map/my-map-circle</a></li><li><a href="module-$ui_map_my-map-cluster.html">$ui/map/my-map-cluster</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-map-cluster.html#~draw">draw</a></li></ul></li><li><a href="module-$ui_map_my-map-draw.html">$ui/map/my-map-draw</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~addFeature">addFeature</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~clear">clear</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~draw">draw</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~finish">finish</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~getFeatures">getFeatures</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~modify">modify</a></li><li data-type='method'><a href="module-$ui_map_my-map-draw.html#~removeFeature">removeFeature</a></li></ul></li><li><a href="module-$ui_map_my-map-flight.html">$ui/map/my-map-flight</a></li><li><a href="module-$ui_map_my-map-geo.html">$ui/map/my-map-geo</a></li><li><a href="module-$ui_map_my-map-heat.html">$ui/map/my-map-heat</a></li><li><a href="module-$ui_map_my-map-html.html">$ui/map/my-map-html</a></li><li><a href="module-$ui_map_my-map-icon.html">$ui/map/my-map-icon</a></li><li><a href="module-$ui_map_my-map-image.html">$ui/map/my-map-image</a></li><li><a href="module-$ui_map_my-map-layers.html">$ui/map/my-map-layers</a></li><li><a href="module-$ui_map_my-map-line.html">$ui/map/my-map-line</a></li><li><a href="module-$ui_map_my-map-link.html">$ui/map/my-map-link</a></li><li><a href="module-$ui_map_my-map-marker.html">$ui/map/my-map-marker</a></li><li><a href="module-$ui_map_my-map-measure.html">$ui/map/my-map-measure</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_my-map-measure.html#~clear">clear</a></li></ul></li><li><a href="module-$ui_map_my-map-overview.html">$ui/map/my-map-overview</a></li><li><a href="module-$ui_map_my-map-palette.html">$ui/map/my-map-palette</a></li><li><a href="module-$ui_map_my-map-panel.html">$ui/map/my-map-panel</a></li><li><a href="module-$ui_map_my-map-placement.html">$ui/map/my-map-placement</a></li><li><a href="module-$ui_map_my-map-pointer.html">$ui/map/my-map-pointer</a></li><li><a href="module-$ui_map_my-map-polygon.html">$ui/map/my-map-polygon</a></li><li><a href="module-$ui_map_my-map-popup.html">$ui/map/my-map-popup</a></li><li><a href="module-$ui_map_my-map-rectangle.html">$ui/map/my-map-rectangle</a></li><li><a href="module-$ui_map_my-map-scale.html">$ui/map/my-map-scale</a></li><li><a href="module-$ui_map_my-map-scatter.html">$ui/map/my-map-scatter</a></li><li><a href="module-$ui_map_my-map-text.html">$ui/map/my-map-text</a></li><li><a href="module-$ui_map_my-map-track.html">$ui/map/my-map-track</a></li><li><a href="module-$ui_map_my-map-zoom.html">$ui/map/my-map-zoom</a></li><li><a href="module-$ui_map_utils_style.html">$ui/map/utils/style</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_style.html#~parse">parse</a></li></ul></li><li><a href="module-$ui_map_utils_util.html">$ui/map/utils/util</a><ul class='methods'><li data-type='method'><a href="module-$ui_map_utils_util.html#.coordinateEqual">coordinateEqual</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createBezierCurvePoints">createBezierCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createCurvePoints">createCurvePoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.createLinePathPoints">createLinePathPoints</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.factorial">factorial</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.fromLonLat">fromLonLat</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.geoJsonDecode">geoJsonDecode</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.getDistance">getDistance</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.mergeProps">mergeProps</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.parseDecimal">parseDecimal</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.svgToImg">svgToImg</a></li><li data-type='method'><a href="module-$ui_map_utils_util.html#.toLonLat">toLonLat</a></li></ul></li></ul><h3>Events</h3><ul><li><a href="module-$ui_map_my-map-cluster.html#~event:change">change</a></li><li><a href="module-$ui_map_my-map-panel.html#~event:close">close</a></li><li><a href="module-$ui_map_my-map-pointer.html#~event:copy">copy</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:drawend">drawend</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:drawstart">drawstart</a></li><li><a href="module-$ui_map_my-map-measure.html#~event:end">end</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:modifyend">modifyend</a></li><li><a href="module-$ui_map_my-map-draw.html#~event:modifystart">modifystart</a></li><li><a href="global.html#event:on-boxEnd">on-boxEnd</a></li><li><a href="global.html#event:on-boxStart">on-boxStart</a></li><li><a href="global.html#event:on-dragDown">on-dragDown</a></li><li><a href="global.html#event:on-dragMove">on-dragMove</a></li><li><a href="global.html#event:on-dragUp">on-dragUp</a></li><li><a href="module-$ui_map_my-map-geo.html#~event:ready">ready</a></li><li></li></ul><h3>Interfaces</h3><ul><li><a href="module-$ui_map_mixins_feature.methods.drawHandler.html">drawHandler</a></li><li><a href="module-$ui_map_mixins_feature.methods.modifyHandler.html">modifyHandler</a></li></ul><h3>Global</h3><ul><li><a href="global.html#createEzMapLayer">createEzMapLayer</a></li><li><a href="global.html#createFcMapLayer">createFcMapLayer</a></li><li><a href="global.html#createFounderLayer">createFounderLayer</a></li><li><a href="global.html#createLayer">createLayer</a></li><li><a href="global.html#createSuperLayer">createSuperLayer</a></li><li><a href="global.html#createTdtLayer">createTdtLayer</a></li><li><a href="global.html#createTdtLayerGroup">createTdtLayerGroup</a></li><li><a href="global.html#createWMTSLayer">createWMTSLayer</a></li><li><a href="global.html#props">props</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">packages/my-map-measure/Measure.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;div>
    &lt;MapDraw ref="draw"
             :brush="brush"
             :effect="effect"
             :type="drawType"
             @ready="init"
             @drawstart="handleDrawStart"
             @drawend="handleDrawEnd"
             manual>
    &lt;/MapDraw>

    &lt;my-map-html v-for="(item, index) in measures"
                 :key="index"
                 class="my-map-measure__tip"
                 :class="`is-${theme}`"
                 positioning="bottom-center"
                 :position="item.position"
                 :offset="[0, -7]">
      &lt;span v-html="item.content">&lt;/span>
      &lt;i @click="handleDelete(item, index)" class="my-map-measure__delete el-icon-delete">&lt;/i>
    &lt;/my-map-html>

    &lt;my-map-html v-if="helpTipPosition &amp;&amp; !disabled"
                 class="my-map-measure__help"
                 :class="`is-${theme}`"
                 ref="helpTooltip"
                 :offset="[15, 0]"
                 positioning="center-left"
                 :position="helpTipPosition">
      {{helpTip}}
    &lt;/my-map-html>

    &lt;my-map-html v-if="measureTipPosition"
                 class="my-map-measure__tip"
                 :class="`is-${theme}`"
                 :position="measureTipPosition"
                 :offset="[0,-15]"
                 positioning="bottom-center">
      &lt;span v-html="measureTip">&lt;/span>
    &lt;/my-map-html>
  &lt;/div>
&lt;/template>

&lt;script>

  /**
   * 测量组件
   * @module $ui/map/my-map-measure
   */
  import MapDraw from '../my-map-draw'
  import {getArea, getLength} from 'ol/sphere'
  import {unByKey} from 'ol/Observable'

  // 画笔默认样式
  const defaultBrush = {
    fill: 'rgba(64,158,255,0.2)',
    stroke: {
      color: 'rgba(64,158,255,0.7)',
      width: 2,
      lineDash: [10, 10]
    },
    circle: {
      radius: 5,
      stroke: {
        width: 2,
        color: '#409eff'
      }
    }
  }

  export default {
    name: 'MyMapMeasure',
    inject: ['myMap'],
    components: {
      MapDraw
    },
    /**
     * 属性参数
     * @member props
     * @property {string} [type=line] 测量类型，距离或面积，支持 'line', 'area'
     * @property {boolean} [disabled] 禁用
     * @property {string} [theme=light] 主题风格
     * @property {string} [startTip] 开始的帮助提示文本
     * @property {string} [endTip] 结束的帮助提示文本
     * @property {object|function} [brush] 画笔样式配置
     * @property {object|function} [effect] 图形样式配置
     */
    props: {
      // 测量类型，距离或面积
      type: {
        type: String,
        default: 'line',
        validator(val) {
          return ['line', 'area'].includes(val)
        }
      },
      disabled: Boolean,
      theme: {
        type: String,
        default: 'light',
        validator(val) {
          return ['light', 'dark'].includes(val)
        }
      },
      startTip: {
        type: String,
        default: '单击确定起点'
      },
      endTip: {
        type: String,
        default: '单击继续，双击结束'
      },
      brush: {
        type: [Object, Function],
        default() {
          return defaultBrush
        }
      },
      effect: [Object, Function]
    },
    computed: {
      drawType() {
        return ({
          line: 'LineString',
          area: 'Polygon'
        })[this.type]
      }
    },
    data() {
      return {
        helpTipPosition: null,
        helpTip: this.startTip,
        measureTip: null,
        measureTipPosition: null,
        measureTipOffset: [0, -15],
        changeListener: null,
        measures: [],
        value: 0
      }
    },
    watch: {
      disabled(val) {
        val ? this.$refs.draw.finish() : this.$refs.draw.draw()
      }
    },
    methods: {
      init(draw) {
        const map = this.myMap.map
        map.on('pointermove', this.handlePointerMove)
        if (!this.disabled) {
          draw.draw()
        }
      },
      formatLength(line) {
        const length = this.value = getLength(line, {projection: this.myMap.projection});
        let output;
        if (length > 100) {
          output = (Math.round(length / 1000 * 100) / 100) +
            ' ' + 'km';
        } else {
          output = (Math.round(length * 100) / 100) +
            ' ' + 'm';
        }
        return output;
      },
      formatArea(polygon) {
        const area = this.value = getArea(polygon, {projection: this.myMap.projection});
        let output;
        if (area > 10000) {
          output = (Math.round(area / 1000000 * 100) / 100) +
            ' ' + 'km&lt;sup>2&lt;/sup>';
        } else {
          output = (Math.round(area * 100) / 100) +
            ' ' + 'm&lt;sup>2&lt;/sup>';
        }
        return output;
      },
      handlePointerMove(e) {
        this.helpTipPosition = e.coordinate
      },
      handleDrawStart(evt) {
        this.value = 0
        const geometry = evt.feature.getGeometry()
        let coordinate = evt.coordinate
        let output
        this.changeListener = geometry.on('change', evt => {
          const geom = evt.target
          if (this.type === 'line') {
            output = this.formatLength(geom)
            coordinate = geom.getLastCoordinate()
          } else if (this.type === 'area') {
            output = this.formatArea(geom);
            coordinate = geom.getInteriorPoint().getCoordinates();
          }
          this.helpTip = this.endTip
          this.$nextTick(() => {
            this.measureTipPosition = coordinate
            this.measureTip = output
          })

        })
      },
      handleDelete(item, index) {
        this.$refs.draw.removeFeature(item.feature)
        this.measures.splice(index, 1)
      },
      handleDrawEnd({feature}) {
        this.changeListener &amp;&amp; unByKey(this.changeListener);

        this.measures.push({
          feature,
          position: this.measureTipPosition,
          content: this.measureTip
        })

        this.$nextTick(() => {
          this.helpTip = this.startTip
          this.helpTipPosition = null
        })
        setTimeout(() => {
          this.measureTipPosition = null
        }, 0)

        /**
         * 测量结束时触发
         * @event end
         * @param {number} value 测量结果，单位 米 或 平方米
         */
        this.$emit('end', this.value)

      },
      /**
       * 清空画板
       * @method clear
       */
      clear() {
        this.$refs.draw &amp;&amp; this.$refs.draw.clear()
      }
    },
    beforeDestroy() {
      this.$refs.draw &amp;&amp; this.$refs.draw.finish()
      if (this.myMap.map) {
        this.myMap.map.un('pointermove', this.handlePointerMove)
      }
    }
  }

&lt;/script>
</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Wed Nov 18 2020 13:00:33 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
